import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'dva';
import { Table,Input,Button,Modal,Select,Row,Col,Divider,Pagination,DatePicker,message,Popconfirm,Tabs } from 'antd';
import styles from './index.less';
import UPpdateImg from './update';
import UPpdatefire from './upfire';
const TabPane = Tabs.TabPane;
const Option = Select.Option;
import {TimeSpan} from '../../utils';
import { format } from 'util';
const Pages = ({ law, dispatch, loading }) => {
    const columns = [
        {
            title: '标题',
            dataIndex: 'title',
            width:300,
        },
        {
            title: '上传时间',
            dataIndex: 'input_time',
            render:text => TimeSpan(text),

        },
        {
            title: '作者',
            dataIndex: 'author',
        },
        {
            title: '封面',
            dataIndex: 'cover',
            render:text =><img onClick={()=>{
                dispatch({type:"law/save",payload:{imgsrc:text}});
            }} style={{width:60,height:60}} src={text}/>,
        },
        {
            title: '内容类型',
            dataIndex: 'type',
            render:text =>text && text== 1?'doc文档':text== 2?'视频':'输入的文本',
        },
        {
            title: '内容',
            dataIndex: 'content',
            // align:'left',
            render:(text,record) => {
                if(record.type == 1){
                    return <a href={"http://view.officeapps.live.com/op/view.aspx?src="+record.url} rel="nofollow"
                        target="view_window">{text.substring(0,9)}......</a>;
                }else if(record.type == 2){
                    return <video src={record.url} width="100" height="60" controls="controls"></video>;
                }else {
                    return <span>{text}</span>;
                }
            },
        },
        {
            title: '操作',
            dataIndex: 'option',
            render: (text,record) =><div>
                <Popconfirm title="确定移除?" onCancel={()=>{}} onConfirm={
                    ()=> dispatch({type:"law/deleteStudy",payload:{id:record.id}})
                } okText="是" cancelText="否">
                    <a style={{color:"red"}}>删除</a>
                </Popconfirm>
                <Divider type="vertical" />
                <a onClick={()=>{
                    dispatch({type:"law/save",payload:{view:true,record:record}});
                    dispatch({type:"law/newpost"});
                }}>修改</a>
            </div>,
        },
    ];

    // console.log(loading.global)
    return(
        <div className={styles.container}>
            <Tabs onChange={value =>{
                dispatch({type:"law/getStudy",payload:{
                    s_id:value,
                    title:'',
                    pageNumber :1,
                    pageSize :10,
                }});
                dispatch({type:"law/save",payload:{catalog_id:value}});
            }} type="card">
                {
                    law.allobj && law.allobj.map(item =>{
                        return <TabPane tab={item.name} key={item.id}></TabPane>;
                    })
                }
            </Tabs>
            <PagesGET dispatch={dispatch} {...law} loading={loading.global}/>
            <Table columns={columns}
                size="small"
                pagination={false}
                loading={loading.global}
                rowKey={id=>id.id}
                dataSource={law.getStudyData || null} />
            <Pagination current={law.pages} showTotal={total => `共计 ${total} 条`}
                style={{float: 'right', margin: 10}} size="small" total={law.total}
                onChange={pages => { !loading.global && dispatch({type:'law/save',payload:{pages:pages}});}}/>
            <Modal visible={law.imgsrc?true:false} footer={null} onCancel={()=>dispatch({type:"law/save",payload:{imgsrc:null}})}>
                <img alt="example" style={{ width: '100%' }} src={law.imgsrc} />
            </Modal>
        </div>
    );
};


class PagesGET extends React.Component {


    constructor (props) {
        super(props);
        this.state = {
            s_id:"",
            title:"",
            titleADD: '',
            catalog_id:'',
            author:'',
            type:'',
            //下面是封面和文件
            cover:'',
            content:'',
            fileListfire:[],
            fileListimg:[],
        };
    }

    // 实例化生命周期函数1
    componentWillMount () {
        //判断是否登录
        this.props.dispatch({type:"law/getStudy",payload:{
            s_id:this.props.catalog_id,
            title:'',
            pageNumber :1,
            pageSize :10,
        }});
    }

    render (){

        let { pages,record,view ,dispatch ,getTXLData,loading,title} = this.props;
        return (
            <div className={styles.containerit}>
                <Input value={this.state.title } placeholder="标题" style={{margin:10,width:256}}
                    onChange={e=>this.setState({title :e.target.value})}/>
                <Button style={{marginLeft:10}} type='primary' onClick={()=>{
                    let {title} = this.state;
                    this.props.dispatch({type:"law/getStudy",payload:{
                        s_id:this.props.catalog_id,
                        title:title,
                        pageNumber :pages,
                        pageSize :10,
                    }});
                }
                }>查询</Button>
                <Button style={{margin:10}} onClick={()=>{
                    dispatch({type:"law/save",payload:{view:true,record:{}}});
                    dispatch({type:"law/newpost"});
                    this.setState({
                        titleADD: '',
                        catalog_id:'',
                        author:'',
                        cover:'',
                        type:'1',
                        content:'',
                        fileListfire:[],
                        fileListimg:[],
                    });
                }}>新增{title}</Button>

                <Modal
                    title={record.id?"修改法规制度":"添加法规制度"}
                    confirmLoading={loading}
                    visible={view}
                    onOk={()=>{
                        let {titleADD,author,cover,type,content} = this.state;
                        console.log(titleADD,author,cover,type,content);
                        if(titleADD && this.props.catalog_id && author && cover && type && content){
                            let body ={
                                title: titleADD,
                                catalog_id:this.props.catalog_id,
                                author:author,
                                cover:cover,
                                type:type,
                                content:content,
                            };
                            if(record.id){
                                body.id = record.id;
                            }
                            dispatch({type:record.id?"law/putStudy":"law/postStudy",payload:body});
                        }else{
                            message.error('请填写完整！');
                        }
                    }}
                    onCancel={()=>{
                        dispatch({type:"law/save",payload:{view:false,record:{}}});
                    }}>
                    <Row>
                        <Col span={6}><span><span style={{color:'red'}}>*</span>标题:</span></Col>
                        <Col span={14}>
                            <Input style={{width: 300, marginBottom: 10, marginTop: -4}}
                                onChange={e => this.setState({titleADD: e.target.value})}
                                value={this.state.titleADD}
                                placeholder="标题"/>
                        </Col>
                        <Col span={6}><span><span style={{color:'red'}}>*</span>作者:</span></Col>
                        <Col span={14}>
                            <Select value={this.state.author || '请选择'} style={{width: 300, marginBottom: 10, marginTop: -4}}
                                // mode="multiple"
                                onChange={value=>{
                                    this.setState({
                                        author:value,
                                    });
                                }}>
                                {getTXLData && getTXLData.map(item =>{
                                    return <Option key={item.id} value={item.id}>{item.name}</Option>;
                                })}
                            </Select>
                        </Col>
                        <Col span={6}><span><span style={{color:'red'}}>*</span>内容类型:</span></Col>
                        <Col span={14}>
                            <Select value={this.state.type || '请选择'} style={{width: 300, marginBottom: 10, marginTop: -4}} onChange={value=>{
                                this.setState({
                                    type:value,
                                });
                            }}>
                                <Option value="1">doc文档</Option>
                                <Option value="2">视频</Option>
                                <Option value="3">输入文本</Option>
                            </Select>
                        </Col>
                        <Col span={6}><span><span style={{color:'red'}}>*</span>封面:</span></Col>
                        <Col style={{marginBottom:20}} span={14}>
                            <UPpdateImg name="3" fileList={this.state.fileListimg} getUrl={e=>{
                                e[0] ? this.setState({
                                    cover:e[0].response && e[0].response.data,
                                    fileListimg:e,
                                }):this.setState({
                                    cover:'',
                                    fileListimg:[],
                                });
                            }}/>
                        </Col>
                        {
                            this.state.type == '3' ?
                                <div>
                                    <Col span={6}><span><span style={{color:'red'}}>*</span>内容:</span></Col>
                                    <Col span={14}>
                                        <Input.TextArea style={{width: 200, marginBottom: 10, marginTop: -4}}
                                            onChange={e => this.setState({content: e.target.value})}
                                            value={this.state.content}
                                            placeholder="内容"/>
                                    </Col>
                                </div> :
                                <div>
                                    <Col span={6}><span><span style={{color:'red'}}>*</span>上传文件:</span></Col>
                                    <Col span={14}>
                                        <UPpdatefire name="3" fileList={this.state.fileListfire} getUrl={e=>{
                                            e[0] ? this.setState({
                                                content:e[0].response && e[0].response.data,
                                                fileListfire:e,
                                            }):this.setState({
                                                content:'',
                                                fileListfire:[],
                                            });
                                        }}/>
                                    </Col>
                                </div>
                        }

                    </Row>
                </Modal>
            </div>
        );
    }

    componentWillReceiveProps (nextProps) {
        if (nextProps.record.id !== this.props.record.id) {
            let {title,author,cover,type,content} = nextProps.record;
            this.setState({
                titleADD: title,
                author:author,
                cover:cover,
                type:type,
                content:content,
            });
        }
        if(nextProps.pages !== this.props.pages){
            if(nextProps.pages == 1 && this.props.pages == 0){return;}
            let {title} = this.state;
            this.props.dispatch({type:"law/getStudy",payload:{
                s_id:this.props.catalog_id,
                title:title,
                pageNumber :nextProps.pages == 0?1:nextProps.pages,
                pageSize :10,
            }});
        }
    }
}

Pages.propTypes = {
    law: PropTypes.object,
    loading: PropTypes.object,
    dispatch: PropTypes.func,
};

export default connect(({ law, loading }) => ({ law, loading }))(Pages);
